<template>
	<view class="content">
		<view class="card_top" @click="navRoute">


			<view class="name">
				{{data.courses.title}}
			</view>

			<view class="time">
				<view class="">
					<text style="margin-right: 15upx;">上课时间：{{data.courses.time_a}} - {{data.courses.time_b}}</text><span
					style="margin-left: 10upx;">{{data.courses.time_s}}-{{data.courses.time_s_en}}</span> 
				</view>
				<text style="margin: 0 5upx;"
					v-for="(item ,index) in data.courses.time_en">{{item}}</text> 
			</view>

			<view class="type">
				<view class="typeItem">
					<image src="/static/age.png" mode=""></image> <text>学龄阶段</text>
					<text>{{data.courses.school_title}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/stage.png" mode=""></image> <text>适用阶段</text>
					<text>{{data.courses.applicable}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/hour.png" mode=""></image> <text>总课时数</text>
					<text>{{data.courses.period_num}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/class.png" mode=""></image> <text>班级类型</text>
					<text>{{data.courses.pattern}}</text>
				</view>
			</view>
		</view>

		<view class="money">
			<view class="moneyItem">
				<text>应付款</text>
				<text>￥{{data.order.price_sum}}</text>
			</view>
<!-- 			<view class="moneyItem">
				<text>砍价</text>
				<text>￥500</text>
			</view> -->
			<view class="moneyItem" style="border-bottom: 1upx solid rgb(247,247,247);">
				<text>积分抵扣</text>
				<text>（{{data.order.integral}}积分）￥{{data.order.price_en}}</text>
			</view>
			<view class="closeMoney">
				合计：<text>￥{{data.order.price_pay}}</text>
			</view>
		</view>

		<view class="form">
			<view class="phone">
				<view class="">
					联系电话:
				</view>
				<view class="">
					{{data.order.tel}}
				</view>
				<!-- <input type="text" value="" placeholder="请输入联系方式" v-model="tel" /> -->
			</view>

			<view class="">
				<view class="">
					宝贝
				</view>
				<view class="baby">
					<view :class="index==Xindex?'babyItem activeBaby':'babyItem'" v-for="(item ,index) in babyList">
						<image :src="item.pic" mode=""></image>
						<view class="name">
							{{item.user}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-toast ref="uToast" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				babyList: [],
				Xindex: -1,
				type: 1,
				order_id:'',
				// integral:''
			}
		},
		onLoad(e) {
			console.log(e)
this.order_id=e.order_id
			this.newData()
		},
		methods: {
			newData() {
					let location = uni.getStorageSync('location');
					let data = {
						order_id:this.order_id,
						longitude: location.lng||'',
						latitude: location.lat||''
					}
				this.$myRuquest('home/user/order_details',data).then(res => {
					if (res.code == 400) {
						this.data=res.data
						this.data.courses.time_b=this.$u.timeFormat(this.data.courses.time_b, 'yyyy-mm-dd');
						this.data.courses.time_a=this.$u.timeFormat(this.data.courses.time_a, 'yyyy-mm-dd');
						this.$myRuquest('home/user/baby_list',{baby_id:this.data.order.baby_id}).then(res=>{
							if(res.code==400){
								this.babyList=res.data
								
							}
						})
					}
				})
				
				// this.$myRuquest('home/user/user').then(res => {
				// 	if (res.code == 400) {
				// 		this.integral = res.data.integral
				// 	}
				// })
			},
navRoute(){
	uni.navigateTo({
	    url: '/pages/organizationDetails/clusterHelp/clusterHelp?id='+this.data.courses.id
	});
}
		}
	}
</script>

<style lang="less">
	.content {
		background-color: rgb(247,247,247);
		padding: 20upx;
		min-height: 100vh;
	}

	.card_top {
		background-color: #fff;
		padding: 20upx;
		border-radius: 12upx;
		// border-bottom: 1upx solid rgb(247,247,247);

		.icon {
			flex: 2;
			display: flex;
			text-align: right;

			view {
				flex: 1;
			}
		}

		.name {
			font-size: 38upx;
			font-weight: 900;
			margin-left: 20upx;
		}


		.time {
			font-size: 20upx;
			color: #5b5b5b;
			margin-left: 20upx;
		}

		.type {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding-left: 10upx;

			.typeItem {
				width: 48%;
				margin: 10upx 1%;
				display: flex;
				font-size: 26upx;

				image {
					width: 20upx;
					height: 20upx;
					margin: auto 0;
					background-image: none;
				}

				text:nth-child(2) {
					margin: 0 15upx;
					color: #757575;
				}
			}
		}

	}

	.money {
		background-color: #fff;
		border-radius: 12upx;
		padding: 20upx;
		margin: 20upx 0;

		.moneyItem {
			display: flex;
			font-size: 26upx;
			padding: 20upx 0;

			text {
				flex: 1;
			}

			text:nth-child(2) {
				text-align: right;
			}
		}

		.closeMoney {
			text-align: right;
      padding: 10upx 0;
			text {
				color: red;
			}
		}
	}

	.form {
		background-color: #fff;
		border-radius: 12upx;
		padding: 20upx;

		.phone {
			display: flex;
			margin-bottom: 20upx;

			input {
				margin-left: 20upx;
			}
		}

		.baby {
			display: flex;
			flex-wrap: wrap;
			width: 100%;



			.babyItem {
				width: calc(29% -20upx);
				margin: 20upx 14upx;
				padding: 10upx;
				position: relative;
				transition: all .3s;

				image {
					width: 160upx;
					height: 160upx;
					margin: 0 10upx;
					border-radius: 8upx;
				}

				.name {
					text-align: center;
				}

				.esc {
					position: absolute;
					top: -20upx;
					right: -20upx;
				}
			}
		}

	}

	.activeBaby {
		background-color: rgba(254, 189, 140, .5);
		box-shadow: 0 0 5upx rgba(0, 0, 0, .2);
		border-radius: 12upx;
	}

</style>
